<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: rgb(251, 251, 251);
        }

        .header {
            width: 100%;
            height: 150px;
            background: #ddd;
        }

        .content-box {
            width: 100%;
            height: 500px;
            display: flex;
        }

        .aside-left {
            background: #ddd;
            width: 70%;
            margin-top: 10px;
            height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px;
            box-sizing: border-box;
        }

        .aside-right {
            display: flex;
            justify-content: space-between;
            background: #ddd;
            width: 29%;
            margin-top: 10px;
            margin-left: 1%;
            height: 500px;
            padding: 10px;
            box-sizing: border-box;
        }

        .aside-left-child {
            width: 100%;
            height: 150px;
            background: #aaa;
            margin-top: 10px;
        }

        .aside-right-child {
            height: 100px;
            background: #aaa;
            flex: 1;
        }

        .aside-right-child:nth-child(2) {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <div class="content-box">
            <aside-left></aside-left>
            <aside-right></aside-right>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('myHeader', {
            template: `<div class = "header">header</div>`
        })
        Vue.component('asideLeft', {
            template: `<div class="aside-left">
                asideLeft
          <aside-left-child1></aside-left-child1>
          <aside-left-child2></aside-left-child2>
        </div>`
        })
        Vue.component('asideRight', {
            template: `<div class = "asideRight">asideRight</div>`
        })
        Vue.component('asideLeftChild1', {
            template: `
        <div class="aside-left-child">这是aside-left-child1组件</div>
      `
        })
        Vue.component('asideLeftChild2', {
            template: `
        <div class="aside-left-child">这是aside-left-child2组件</div>
      `
        })
        Vue.component('asideRight', {
            template: `
        <div class="aside-right">
          <aside-right-child></aside-right-child>
          <aside-right-child></aside-right-child>
          <aside-right-child></aside-right-child>
        </div>
      `
        })
        Vue.component('asideRightChild', {
            template: `
        <div class="aside-right-child">这是aside-right-child组件</div>
      `
        })
        Vue.component('asideRightChild', {
            template: `
        <div class="aside-right-child">这是aside-right-child组件</div>
      `
        })
        Vue.component('asideRightChild', {
            template: `
        <div class="aside-right-child">这是aside-right-child组件</div>
      `
        })
        var app = new Vue({
            el: "#app",
            data: {

            }
        })
    </script>
</body>

</html>